<template>
  <div>
    <!-- header-->
   <el-card style="width: 100%;" >
         <el-form :inline="true" :model="formInline" class="demo-form-inline" >
           <el-form-item label="姓名">
             <el-input v-model="formInline.uname" placeholder="姓名" clearable></el-input>
           </el-form-item>
           <el-form-item label="职务">
             <el-select v-model="formInline.role" placeholder="职位" clearable>
               <el-option label="销售主管" value="销售主管"></el-option>
               <el-option label="客户经理" value="客户经理"></el-option>
               <el-option label="高管" value="高管"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit()">查询</el-button>
             <el-button type="primary" @click="empty()">清空查询</el-button>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="showInsert()">新建</el-button>
           </el-form-item>
         </el-form>
  </el-card>


     <!-- 表格卡片-->
   <el-card class ="box-card-content"style="width: 100%;" v-bind:style="{minHeight: Height+'px'}">
     <template>
       <el-table
         :data="tableData"
         style="width: 100%"
         highlight-current-row
         v-loading="listLoading"
         @selection-change="selsChange">
         <el-table-column
           label="用户 ID"
           prop="id">
         </el-table-column>
         <el-table-column
           label="用户姓名"
           prop="uname">
         </el-table-column>
         <el-table-column
           label="用户职位"
           prop="role">
         </el-table-column>
         <el-table-column
           label="用户状态"
           prop="isUse">
         </el-table-column>
         <el-table-column
               fixed="right"
               label="操作"
               width="200"
               >
               <template slot-scope="scope">
                       <el-button
                         size="mini"
                         @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                       <el-button
                         size="mini"
                         type="danger"
                        @click.native.prevent="handleDelete(scope.$index,scope.row)">删除</el-button>
                     </template>
             </el-table-column>
       </el-table>
     </template>
    </el-card >

     <el-card  shadow="never" >
         <el-pagination
           background='true'
           @current-change="handleCurrentChange"
           @size-change="handleSizeChange"
           :page-sizes="[3,5,10]"
           :current-page.sync="currentPage1"
           :page-size="pageSize"
           layout="total,prev, pager, next,sizes , jumper"
           :total="total">
         </el-pagination>
       </el-card>

    <!--编辑 对话框-->
    <el-dialog :title="editForm.id?'编辑':'新增'" v-model="editFormVisible" :visible.sync="editFormVisible" width="30%" :before-close="handleClose">
      <el-form :model="editForm" label-width="130px" min-height="150px" label-position="right" size="small" :rules="rules" ref="editForm">

        <el-form-item label="用户名字" style=""  prop="uname">
          <el-input v-model="editForm.uname"></el-input>
        </el-form-item>

        <el-form-item label="用户职位"  prop="role">
          <el-col :span="13">
            <el-select placeholder="用户职位"  v-model="editForm.role" prop="role">
              <el-option label="销售主管" value="销售主管"></el-option>
              <el-option label="客户经理" value="客户经理"></el-option>
              <el-option label="高管" value="高管"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="用户密码"  prop="pwd" >
          <el-col :span="13">
            <el-input placeholder="用户密码" v-model="editForm.pwd" show-password></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户状态"  prop="isUse">
          <el-col :span="13">
            <el-input placeholder="用户状态" v-model="editForm.isUse"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item size="large" label-position="right">
          <el-button size="small" @click="cancel('editForm')" label-position="right">取 消</el-button>
          <el-button size="small" type="primary" @click=" editDo('editForm') " label-position="right">{{editForm.id?'保存':'提交'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>

<script>
  export default {
     data() {
       return{
         Height:0,
          tableData: [],
          currentPage1:1,
          pageSize:5,
          total:0,
          id: '',
         sels: [],
         currentPage4:1,
         multipleSelection: [],
         formInline: {
           uname:'',
           role:''
         },
         editFormVisible:false,

         editForm:{
           id:"",
           uname:"",
           role:"",
           pwd:"",
           isUse:""
         },
         rules:{
           id:[{
             required: true,
             message:'请输入id',
             trigger:'blur'
           },
           {
             min:1,
             max:3,
             message:'长度在1到3个字符',
             trigger:'blur'
           },
           ],
           uname:[{
             required: true,
             message:'请输入用户名',
             trigger:'blur'
           },
           {
             min:2,
             max:5,
             message:'长度在2到5个字符',
             trigger:'blur'
           },
           ],
           role:[{
             required: true,
             message:'请选择职位',
             trigger:'blur'
           },
           ],
           pwd:[{
             required: true,
             message:'请输入密码',
             trigger:'blur'
           },
           {
             min:6,
             max:6,
             message:'密码长度必须为6',
             trigger:'blur'
           },
           ],
           isUse:[{
             required: true,
             message:'请输入账号状态',
             trigger:'blur'
           }],
         },
       }
     },
        created() {
          this.getData();
        },
        methods: {
          selsChange(val) {
            this.val=val
          },
          showInsert() {
            this.editFormVisible = true;
            this.editForm.id="";
            this.editForm.uname="";
            this.editForm.role="";
            this.editForm.pwd="";
            this.editForm.isUse="";
          },
          getData(){
            this.getRequest('ur/getRecordList?beginPage='+this.currentPage1+'&pageSize='+this.pageSize)
            .then(successResponse => {
              if(successResponse.data.status == 200) {
                this.tableData=successResponse.data.obj;
                this.total=successResponse.data.totleSize;
              }
              else
                this.$message.error(successResponse.dat.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
          },
          handleCurrentChange(val) {
            this.getData()
          },
          handleSizeChange:function(psize){
                    this.$data.pageSize = psize;
					this.getData()
          },
          //模糊查询
          //初始化数据
          getUsersInfo: function() {
            this.getRequest('ur/getAll')
              .then(response => {
                this.tableData = response.data.obj
              })
              .catch(error => {
                console.log(error)
              })
              },
              //显示编辑页
        handleEdit:function(index,row) {
              this.editFormVisible = true;
              this.editForm = Object.assign({},row)
              },
        cancel(formName){
          this.$refs[formName].resetFields();
          this.editFormVisible = false
          },
         //保存页面
          editDo(formName) {
            this.$refs[formName].validate((vaild) =>{
              if (vaild) {
                if(this.editForm.id){
              this.postRequest('ur/updateUser', {
                  id: this.editForm.id,
                  uname: this.editForm.uname,
                  role: this.editForm.role,
                  pwd: this.editForm.pwd,
                  isUse:this.editForm.isUse,
                })
                .then(successResponse => {
                  if (successResponse.data.status == 200) {
                    this.$message.success("保存成功！");
                    this.getUsersInfo();
                    this.getData()
                  } else
                    this.$message.error(successResponse.data.msg);
                })
                .catch(failResponse => {
                  this.$message.error('网络不通畅');
                })
              this.editFormVisible = false;
          }else {
            this.postRequest('ur/insertUser', {
                uname: this.editForm.uname,
                role: this.editForm.role,
                pwd: this.editForm.pwd,
                isUse:this.editForm.isUse,
              })
              .then(successResponse => {
                if (successResponse.data.status == 200) {
                  this.$message.success("新增成功！");
                  this.getUsersInfo();
                  this.getData()
                } else
                  this.$message.error(successResponse.data.msg);
              })
              .catch(failResponse => {
                this.$message.error('网络不通畅');
              })
            this.editFormVisible = false;
          }
         }else{
            console.log('error submit!!');
            return false;
          }
         });
         },
            handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                  this.editForm={}
                })
                .catch(_ => {});
            },
            handleDelete(index,row) {
              this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.postRequest('ur/deleteUser',{
                  id:row.id,
                })
                  .then(successResponse => {
                    if (successResponse.data.status == 200) {
                      this.$message.success("删除成功！");
                      this.getData();
                      this.currentPage1=1;
                    }
                    else
                      this.$message.error(successResponse.data.msg);
                  })
                  .catch(failResponse => {
                    this.$message.error('网络不通畅');
                  });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
            },


            onSubmit:function() {
              this.postRequest('ur/selectByRule',{
                uname:this.formInline.uname,
                role:this.formInline.role,
              })
                      .then(response =>{
                       this.tableData=[];
                       this.tableData=response.data.obj
                      })
                      .catch(error =>{
                        console.log(error);
                      })
            },

            empty:function(){
              this.formInline.uname="";
              this.formInline.role="";
              this.getData();
            },

         mounted(){
              //动态设置内容高度 让footer始终居底   header+footer的高度是100
              this.Height = document.documentElement.clientHeight -375;
          　　//监听浏览器窗口变化　
              window.onresize = ()=> {this.Height = document.documentElement.clientHeight -375}
            }
            },
        }
</script>

<style>
  .box-card-header {
    width: 100%;
  }

  .box-card-content {
    width: 100%;
  }
</style>
